<template>
	<div class="app-container">
		<div ref="box1" class="flex-center margin-bottom-10">
			<el-radio-group v-model="searchParams.upkeepState" @change="onStateChange">
				<el-radio-button v-for="(item, index) in upkeepStateList" :key="index" :label="item.id">
					<el-badge v-if="item.count" :value="item.count" :max="99">
						<span class="margin-right-20">{{ item.name }}</span>
					</el-badge>
					<span v-else class="margin-right-10">{{ item.name }}</span>
				</el-radio-button>
			</el-radio-group>
		</div>
		<jk-operation-card ref="box2" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<el-radio-group v-model="comName" class="margin-right-10" @change="onViewTypeChange">
						<el-radio-button label="machineView">
							<span class="">设备-维度</span>
						</el-radio-button>
						<el-radio-button label="taskView">
							<span class="">任务-维度</span>
						</el-radio-button>
					</el-radio-group>
				</div>
				<div class="flex-end-center-wrap">
					<el-checkbox v-model="isCustomDate" border class="item-gap" size="small">自定义</el-checkbox>
					<el-radio-group v-if="!isCustomDate" v-model="dateType" size="small" class="item-gap" @change="onDateTypeChange">
						<el-radio-button
							v-for="(dateTypeItem) in dateTypeList"
							:key="dateTypeItem.id"
							:label="dateTypeItem.id"
						>{{ dateTypeItem.name }}</el-radio-button>
					</el-radio-group>
					<jk-date-picker v-else v-model="searchParams.belongDate" type="datetimerange" :clearable="true" start-placeholder="计划开始日期" end-placeholder="计划结束日期" class=" margin-5-0 item-gap"></jk-date-picker>
					<jk-select v-model="searchParams.upkeepTypeId" :clearable="true" :option-list="upkeepTypeList" placeholder="保养类别" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-select v-model="searchParams.workshopId" :clearable="true" :option-list="workshopList" placeholder="区域" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<jk-search-input v-model="searchParams.machineNameOrCode" placeholder="设备编号或名称" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-input v-model="searchParams.upkeepItemName" placeholder="保养项目" size="small" class="search-bar-item-size2 margin-5-0 item-gap" clearable @on-enter="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<component
			:is="comName"
			ref="childBox"
			:height="tableHeight - 24"
			:query-params="queryParams"
			@on-refresh="getStateCountRequest"
		></component>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { formatDate, pageConfig } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../../mixins/getMenuColumn';
    import handlerCache from '../../../../mixins/handler-cache';
    import { upkeepStateList } from '../../../../utils/jk/status-option-list';
    import { machineManagerUpkeepMachineGobGetStateCount } from '../../../../api/machine/upkeepTask';
    import permissionMixin from '../../../../mixins/permission-mixin';
    import upkeepMixin from './upkeep';
    import machineView from './components/viewType/machine-view';
    import taskView from './components/viewType/task-view';
    import { machineManagerUpkeepTypePage } from '../../../../api/machine/upkeepCategory';
    export default {
        name: 'UpkeepTask',
        components: {
            taskView,
            machineView
        },
        mixins: [calHeight, getMenuColumn, handlerCache, permissionMixin, upkeepMixin],
        data() {
            return {
                comName: 'machineView',
                isCustomDate: false,
                upkeepTypeList: [],
                dateType: -1,
                dateTypeList: [
                    { id: 14, name: '最近两周' },
                    { id: 7, name: '最近一周' },
                    { id: 1, name: '最近两天' },
                    { id: 0, name: '今天' },
                    { id: -1, name: '所有' }
                ],
                upkeepStateList: upkeepStateList.filter(x => x.id !== 3), // 因已完成的在设备维度会面临数据量的问题，所以完成到保养记录查看
                workshopList: [],
                dataId: null,
                tableLoading: true,
                totalCount: 0,
                searchParams: {
                    pageNo: 1,
                    pageSize: pageConfig.pageSize,
                    machineNameOrCode: '',
                    upkeepItemName: '',
                    upkeepTypeId: null,
                    code: null,
                    workshopId: null,
                    upkeepState: 0,
                    belongDate: []
                },
                queryParams: {}
            };
        },
        methods: {
            onViewTypeChange() {
                this.refreshChildData();
            },
            onDateTypeChange(e) {
                if (e === -1) {
                    this.$set(this.searchParams, 'belongDate', []);
                } else {
                    this.$set(this.searchParams, 'belongDate', [formatDate(Date.now() - (e * 24 * 60 * 60 * 1000)) + ' 00:00:00', formatDate(Date.now()) + ' 23:59:59']);
                }
            },
            onStateChange() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.refreshChildData();
            },
            refreshChildData() {
                this.queryParams = JSON.parse(JSON.stringify(this.searchParams));
                this.$nextTick(() => {
                    this.$refs.childBox.getListRequest();
                });
            },
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
            },
            getStateCountRequest() {
                return machineManagerUpkeepMachineGobGetStateCount(this.searchParams).then(res => {
                    if (res.data.status === 200) {
                        this.upkeepStateList = this.upkeepStateList.map(x => {
                            x.count = 0;
                            res.data.res.forEach(k => {
                                if (x.id === k.upkeepState) {
                                    x.count = k.count;
                                }
                            });
                            return x;
                        });
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.$set(this.searchParams, 'pageNo', 1);
                this.refreshChildData();
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.refreshChildData();
                    this.getDependentData();
                });
            },
            getUpkeepTypeListRequest() {
                return machineManagerUpkeepTypePage({ auditState: 1 }).then(res => {
                    if (res.data.status === 200) {
                        this.upkeepTypeList = res.data.res || [];
                    }
                });
            },
            async getDependentData() {
                this.onDateTypeChange(this.dateType);
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                if (!this.searchParams.workshopId) this.$set(this.searchParams, 'workshopId', this.$store.state.user.userWorkshop.defaultWorkshopId);
                await this.getUpkeepTypeListRequest();
                await this.getStateCountRequest();
                this.refreshChildData();
            }
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>
